<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    table {
        border: 1px solid red;
        margin-top: 10px;
    }

    tr,
    th,
    td {
        width: 150px;
        height: 40px;
        border: 1px solid red;
        border-collapse: collapse;
        text-align: center;
    }

    body {
        display: flex;
    }

    #add {
        margin: auto;
    }

    #but {
        width: 100px;
        height: 40px;
    }

    #ipt1,
    #ipt2,
    #ipt3 {
        height: 40px;
    }
</style>

<body>
    <div id="add">
        <input type="text" placeholder="姓名：" id="ipt1">
        <input type="text" placeholder="年龄：" id="ipt2">
        <input type="text" placeholder="性别：" id="ipt3">
        <button id="but">添加</button>
        <div id="box"></div>

        <table>
            <tr>
                <td colspan="4">学生信息表</td>
            </tr>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>18</td>
                    <td>男</td>
                    <td><a href="#">删除</a></td>
                </tr>
            </tbody>

        </table>
    </div>

    <script>
        var gg = ''
        function fn() {
            var a = document.getElementById('ipt1').value
            var b = document.getElementById('ipt2').value
            var c = document.getElementById('ipt3').value
            var trobj = document.createElement('tr')// 创建tr
            var tdobj = document.createElement('td')// 创建td1
            tdobj.innerHTML = a// td1里的内容
            var tdobj1 = document.createElement('td')// 创建td2
            tdobj1.innerHTML = b// td2里的内容
            var tdobj2 = document.createElement('td')// 创建td3
            tdobj2.innerHTML = gg
        }
    </script>

</body>

</html>